<div class="card-container">
  <nz-tabset nzType="card" nzCentered [nzSelectedIndex]="selectedIndex">
    <nz-tab [nzTitle]="'角色信息'">
      <nz-card nzTitle="编辑角色" [nzExtra]="extraTemplate">
        <nz-alert *ngIf="saveError" [nzType]="'error'" [nzMessage]="saveError" [nzShowIcon]="true" class="mb-lg" />
        <form nz-form [formGroup]="form" (ngSubmit)="submit()" se-container="1" labelWidth="180">
          <se label="角色名称" [error]="{ required: '请填写' }" optionalHelp="角色名称不支持修改" required>
            <nz-input-group>
              <input
                nz-input
                placeholder="请输入角色名称"
                formControlName="name"
                [style.background-color]="btn == 'edit' ? '#f0f0f0' : 'white'"
                [readonly]="btn == 'edit'"
              />
            </nz-input-group>
          </se>
          <se label="描述">
            <input nz-input formControlName="descr" placeholder="密码" />
          </se>
          <se label="角色" error="角色不能相同" required>
            <input nz-input placeholder="请输入角色" formControlName="role" />
          </se>

          <!-- <se label="开启">
            <nz-switch formControlName="enabled" name="enabled"></nz-switch>
          </se> -->
          <se>
            <button nz-button nzType="primary" [disabled]="form.invalid" type="submit" [nzLoading]="submitting">提交</button>
          </se>
        </form>
      </nz-card>
    </nz-tab>
    <nz-tab nzTitle="分配菜单">
      <nz-card [nzTitle]="treeTitle" [nzExtra]="extraTemplate">
        <nz-tree
          style="margin-left: 10%"
          #nzTreeComponent
          nzCheckable
          [nzCheckedKeys]="defaultMenus"
          [nzData]="menuTree"
          nzBlockNode
          nzShowIcon
          [nzTreeTemplate]="nzTreeTemplate"
        >
          <ng-template #nzTreeTemplate let-node let-origin="origin">
            <span>{{ node.title }}</span>
            <!-- <span *ngIf="origin.isLeaf">
              <span class="custom-node">操作权限</span>
              <nz-checkbox-group [(ngModel)]="checkOptionsOne"></nz-checkbox-group>
            </span> -->
          </ng-template>
        </nz-tree>
        <p></p>
        <button style="margin-left: 14%" nz-button nzType="primary" (click)="grantMenu()">提交</button>
      </nz-card>
    </nz-tab>
  </nz-tabset>
  <ng-template #extraTemplate>
    <button nz-button nzType="default" (click)="back()">返回</button>
  </ng-template>
</div>
